<template>
  <div class="dataStatistics" ref="dataStatisticsRef"></div>
</template>

<script>
import { commonRequest } from "../../api/api.js";
export default {
  name: "dataStatistics",
  data() {
    return {
      province: "",
      city: "",
      area: "",
      endYear: "",
      startYear: "",
      projectName: ""
    };
  },
  mounted() {},
  methods: {
    // 接受父组件值
    acceptedValue(
      provinceValue,
      cityValue,
      endYearValue,
      startYearValue,
      projectNameValue,
      areaValue
    ) {
      this.province = provinceValue;
      this.city = cityValue;
      this.area = areaValue;
      this.projectName = projectNameValue;
      var endYearS = "";
      var startYears = "";
      var dataend = new Date(endYearValue);
      var datasta = new Date(startYearValue);
      if (endYearValue != "") {
        endYearS = dataend.getFullYear();
      }
      if (startYearValue != "") {
        startYears = datasta.getFullYear();
      }
      if (endYearS >= startYears) {
      } else {
        if (endYearS != "" && startYears != "") {
          this.$message.error("请选择正确的时间");
          return;
        }
      }
      var that = this;
      commonRequest("/api/project/getProjectNameAmount", {
        province: provinceValue,
        city: cityValue,
        endYear: endYearS,
        startYear: startYears,
        projectName: projectNameValue,
        area: areaValue
      }).then(res => {
        var dataName = [];
        var dataValue = [];
        for (let i = 0; i < res.length; i++) {
          dataName.push(res[i].projectName);
          dataValue.push(res[i].projectAmount);
        }
        var time = setInterval(function() {
          if (dataName.length == res.length) {
            clearInterval(time);
            that.StatisticalGeneration(dataName, dataValue);
          }
        }, 100);
      });
    },
    // 图表生成
    StatisticalGeneration(dataName, dataValue) {
      for (let i = 0; i < dataValue.length; i++) {
        for (let j = 0; j < dataValue.length; j++) {
          if (dataValue[i] < dataValue[j]) {
            // 相邻元素两两对比
            var t = dataValue[i];
            dataValue[i] = dataValue[j];
            dataValue[j] = t;
            var t1 = dataName[i];
            dataName[i] = dataName[j];
            dataName[j] = t1;
          }
        }
      }
      var that = this;
      var MaxValue = Math.max(...dataValue);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "12%",
          right: "3%",
          bottom: "15%",
          top: "3%"
        },
        yAxis: [
          {
            type: "category",
            data: dataName,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, //横轴信息全部显示
              rotate: 0, // 倾斜角度
              formatter: function(value) {
                return value.length > 10
                  ? value.substring(0, 10) + "..."
                  : value;
              }
            }
          }
        ],
        xAxis: [
          {
            type: "value",
            max: MaxValue
          }
        ],
        dataZoom: [
          {
            start: 100,
            end: 100,
            width: 14,
            type: "slider",
            show: true,
            yAxisIndex: [0], //设置 dataZoom-slider 组件控制的 y轴
            handleSize: 0, //滑动条的 左右2个滑动条的大小
            right: 0, //左边的距离
            top: 0,
            bottom: 26, //右边的距离
            minValueSpan: 15, //用于限制窗口大小的最小值（实际数值）。
            maxValueSpan: 15, //用于限制窗口大小的最大值（实际数值）。
            fillerColor: "#aaa", // 选中范围的填充颜色。
            borderColor: "#f9fbff",
            backgroundColor: "#f9fbff", //两边未选中的滑动条区域的颜色
            showDataShadow: false, //是否显示数据阴影 默认auto
            showDetail: false //即拖拽时候是否显示详细数值信息 默认true
          }
        ],
        series: [
          {
            name: "项目",
            type: "bar",
            barWidth: "44%",
            data: dataValue,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ["#44a2ff", "#2862ad"];
                  if (params.dataIndex % 2 == 0) {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                }
              }
            }
          }
        ]
      };
      var myChart1 = this.$echarts.init(that.$refs.dataStatisticsRef);
      myChart1.setOption(option);
      if (myChart1._$handlers.click) {
        myChart1._$handlers.click.length = 0;
      }
      myChart1.on("click", function(params) {
        // 跳转项目查询
        that.$router.push({
          path: "/projectQuery",
          query: {
            keyword: params.name,
            province: that.province,
            city: that.city,
            area: that.area,
            endYear: that.endYear,
            startYear: that.startYear
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.dataStatistics {
  width: 100%;
  height: 100%;
}
</style>
